<script setup>
import { onMounted, watch,ref } from 'vue'
import BottomNav from '@/components/bottomNav.vue'
import BottomNavStudent from './bottomNavStudent.vue';
import { useRoute, useRouter } from 'vue-router'
import { useChatStore } from '@/store'
const store = useChatStore()
const route = useRoute()
const router = useRouter()
const props = defineProps({
  /** 内容区域宽度（默认80%，支持百分比/像素值） */
  contentWidth: {
    type: String,
    default: '80%',
    description: '内容区域宽度，如"80%"或"1200px"'
  },
  /** 内容区域背景色（默认绿色，支持色值/变量） */
  bgColor: {
    type: String,
  },
  /** 内容区域内边距（默认24px，支持简写） */
  padding: {
    type: String,
    default: '24px',
    description: '内容区域内边距，如"24px"或"16px 24px"'
  }
})
const loginType = ref(null)
watch( () => route.name, (val) => {
  console.log(val, 'val..........')
  const name=val.slice(0,5)==='teach'
  loginType.value = name
  
}, { immediate: true })
onMounted(()=>{
  // loginType.value=sessionStorage.getItem('loginType')
})
</script>
<template>
  <main class="main-content">
    <slot name="content"></slot>
    <div class="default-content" v-if="!$slots.content">
      <div class="default-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff"
          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
        </svg>
      </div>
      <p class="default-text">暂无内容，可在父组件中通过插槽自定义内容</p>
    </div>
  </main>
  <!-- 底部导航 -->
  <BottomNav v-if="loginType"/>
  <BottomNavStudent v-else />
</template>
<style scoped lang='scss'>
// 主内容容器核心样式
.main-content {
  flex: 1;
  width: v-bind(contentWidth);
  height: calc(100% - 200px);
  margin: 0 auto 20px auto;
  padding: v-bind(padding);

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

// 默认内容样式（无自定义内容时显示）
.default-content {
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  .default-icon {
    opacity: 0.8;
  }

  .default-text {
    font-size: 16px;
    font-weight: 400;
    max-width: 300px;
  }
}

// 响应式适配：小屏幕优化
@media (max-width: 375px) {
  .main-content {
    width: 90%;
    margin: 20px auto;
    padding: 16px;
    min-height: 240px;
  }

  .default-content {
    .default-icon {
      width: 36px;
      height: 36px;
    }

    .default-text {
      font-size: 14px;
    }
  }
}

// 中等屏幕适配（补充768px断点，覆盖平板等设备）
@media (min-width: 376px) and (max-width: 768px) {
  .main-content {
    width: 85%;
  }
}
</style>
